<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语法</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <span>-------------------------v-once------------------------------------</span>

    <div id="app">
        <!-- <span>---------------{{ x }}------- v-html="x"--------------</span>
        <p>{{ x }}</p>
        <p><span v-html="x"></span></p> -->
        <!--span v-html="x"会隐藏后面 x的值 ，而{{ x }} 会直接把源码显示出来而不是运行它 -->
        <!-- <p>{{y}}</p>
        <p> <span v-html="y" style="color: aqua;"></span> </p> -->
        <!-- <span>------------------ v-bind v-bind:disabled---------------------</span>
        <div v-bind:id="bd">
            <button v-bind:disabled="isButtonDisabled">按钮</button>
        </div>
        <span>------------------使用 JavaScript 表达式-----------------------</span>
        <div app.z="{{ parseInt(z)+1}}"> -->
        <!-- parseInt 转换    -->
        <!-- 三元表达式 -->
        <!-- <h3>{{ok? 'yes': 'no'}}</h3>

            <input v-model="z">
        </div> -->
        <span>-----------------动态参数-------------------</span>

        <!-- <div>.
               <a :[attributeName]="value"></a>
            <a v-bind> </a>
        </div> -->
        <span>-------------------------计算属性和侦听器------------------------------------</span>
        <div>
            <p>{{msg}}</p>
            <p>{{msg2}}</p>
            <div> <input v-model="msg"> </div>
            <input v-model="msg">
        </div>

    </div>
</head>

<body>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                // x: "<h1>我的第一个h1</h1>",
                // y: "<h2>我的第二个h2</h2>",
                // z: "1",
                // ok: 1,
                // name: 'style',
                // value: "color:red",
                msg: '10'
            },
            computed: {
                //计算属性的getter
                msg2: function () {
                    //this指向vm实例
                    return parseInt(this.msg) + parseInt(this.msg2);
                },

                //     watch: {
                //         msg: function (val) {
                //             console.log("发生了变化" + val)
                //             this.ms2 = val + '' + parseInt(this.msg) + 10;

                //         }


                // }
            }
        })


    </script>
</body>

</html>